<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车-维多购物平台</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <link href="./bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/index.js" type="module" defer="defer"></script>
    <script src="./js/cookie.js"></script>
    <style>
        header {
            background-color: rgba(0,0,0,.7);;
            backdrop-filter: blur(20px);
        }


        main {
            padding: 10px;
        }

        .trolley-content {
            width: 100%;
            margin: 60px 0 50px 0;
            max-width: 1200px;
        }

        .trunk-content {
            width: 100%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: var(--color-background);
            border-radius: 3px;
            margin-bottom: 40px;
            max-width: 1200px;
        }

        .trunk-content table {
            text-align: center;
            width: 100%;
            border-top: 2px solid var(--ui-colors-neutral5);
        }

        .trunk-content table th {
            text-align: center;
        }

        .trunk-content table td {
            text-align: center;
        }

        .trunk-content thead {
            height: 40px;;
        }

        .trunk-content tbody {
            width: 100%;
        }

        .trunk-content table tr {
            width: 100%;
            border-bottom: 2px solid var(--ui-colors-neutral5);
        }

        table .choice,
        table .price {
            width: 100px;
        }

        table .operate {
            width: 80px;
        }

        table .product {
            display: flex;
            align-items: center;
        }

        table .product img {
            width: 100px;
            height: 100px;
        }

        table .operate button {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        table .operate button:hover {
            background-color: var(--ui-colors-danger9);
        }

        table .operate button .icon-delete {
            width: 100%;
            height: 100%;
        }

        h2 {
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        h4 {
            font-size: 16px;
            font-weight: 600;
        }

        .price h5 {
            color: var(--ui-colors-orange);
        }

        .pay {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--color-background);
            position: sticky;
            bottom: 0;
            box-shadow: 0 -3px 6px rgba(0,0,0,.1);
        }

        #choice-num {
            color: var(--ui-colors-orange);
        }

        .pay-operate {
            color: var(--ui-colors-orange);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pay-operate span {
            font-size: 25px;
        }

        .pay-operate button {
            width: 100px;
            height: 30px;
            background-color: var(--ui-colors-orange);
            border-radius: 3px;
            color: var(--color-background);
        }

        /* checkbox settings 👇 */

        .ui-checkbox {
            --secondary-color: #fff;
            /* checkbox */
            --checkbox-diameter: 20px;
            --checkbox-border-radius: 5px;
            --checkbox-border-color: #d9d9d9;
            --checkbox-border-width: 1px;
            --checkbox-border-style: solid;
            /* checkmark */
            --checkmark-size: 1.2;
        }

        .ui-checkbox,
        .ui-checkbox *,
        .ui-checkbox *::before,
        .ui-checkbox *::after {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .ui-checkbox {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: var(--checkbox-diameter);
            height: var(--checkbox-diameter);
            border-radius: var(--checkbox-border-radius);
            background: var(--secondary-color);
            border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }

        .ui-checkbox::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-box-shadow: 0 0 0 calc(var(--ui-colors-orange) / 2.5) var(--ui-colors-orange);
            box-shadow: 0 0 0 calc(var(--ui-colors-orange) / 2.5) var(--ui-colors-orange);
            border-radius: inherit;
            opacity: 0;
            -webkit-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
            -o-transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
            transition: all 0.5s cubic-bezier(0.12, 0.4, 0.29, 1.46);
        }

        .ui-checkbox::before {
            top: 40%;
            left: 50%;
            content: "";
            position: absolute;
            width: 4px;
            height: 7px;
            border-right: 2px solid var(--secondary-color);
            border-bottom: 2px solid var(--secondary-color);
            -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
            -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
            transform: translate(-50%, -50%) rotate(45deg) scale(0);
            opacity: 0;
            -webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
            -o-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),opacity 0.1s;
        }

        /* actions */

        .ui-checkbox:hover {
            border-color: var(--ui-colors-orange);
        }

        .ui-checkbox:checked {
            background: var(--ui-colors-orange);
            border-color: transparent;
        }

        .ui-checkbox:focus {
            display: none;
        }

        .ui-checkbox:checked::before {
            opacity: 1;
            -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
            -ms-transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
            transform: translate(-50%, -50%) rotate(45deg) scale(var(--checkmark-size));
            -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
            -o-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
            transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
        }

        .ui-checkbox:active:not(:checked)::after {
            -webkit-transition: none;
            -o-transition: none;
            -webkit-box-shadow: none;
            box-shadow: none;
            transition: none;
            opacity: 1;
        }

        button:disabled {
            background-color: rgba(255, 92, 0, 0.55);
            cursor: not-allowed;
        }

    </style>
</head>

<body>
    <header id="header" class="no-user">
        <div class="logo">
            <img src="./images/logo.png" alt="logo">
        </div>
        <nav class="main-menu">
            <a href="/">首页</a>
            <a href="/allphone">手机</a>
            <a href="/allcomputer">电脑</a>
        </nav>
        <div class="user-info">
            <div class="user-operate">
                <div class="user-default">
                    <a href="/account#login">登录</a>
                    <span>|</span>
                    <a href="/account#register">注册</a>
                </div>
                <div class="user-one">
                    <div class="user-name">
                        <span id="username"></span>
                        <svg t="1687403727017" class="icon-user" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="872" width="15" height="15"><path d="M468.7872 738.5088c0-10.4448 4.096-20.8896 12.0832-28.8768L929.792 260.7104c15.9744-15.9744 41.984-15.9744 57.9584 0 7.9872 7.9872 12.0832 18.432 12.0832 28.8768s-4.096 20.8896-12.0832 28.8768L538.624 767.3856c-15.9744 15.9744-41.984 15.9744-57.9584 0-7.9872-7.9872-11.8784-18.432-11.8784-28.8768z" p-id="873"></path><path d="M30.3104 260.9152c7.9872-7.9872 18.432-12.0832 28.8768-12.0832s20.8896 4.096 28.8768 12.0832l448.9216 448.9216c15.9744 15.9744 15.9744 41.984 0 57.9584-7.9872 7.9872-18.432 12.0832-28.8768 12.0832s-20.8896-4.096-29.0816-12.0832L30.3104 318.6688c-15.9744-15.9744-15.9744-41.7792 0-57.7536z" p-id="874"></path></svg>
                    </div>
                    <div class="user-links">
                        <ul>
                            <li><a href="/user"  target="_blank">个人中心</a></li>
                            <li><a href="/wallet"  target="_blank">我的钱包</a></li>
                            <li><a href="/order"  target="_blank">我的订单</a></li>
                            <li><a href="/uevaluate"  target="_blank">评论晒单</a></li>
                            <li><a href="/" onclick="ClearCookie()">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <a href="/trolley" class="mini-shopping-cart">购物车(<span id="count-trolley">0</span>)</a>
            </div>
    </header>
    <main class="trolley">
        <!-- 购物车躯干部分 -->
        <div class="trolley-content">
            <div class="trolley-header">
                <h2>我的购物车</h2>
            </div>
            <div class="trunk-content">
                <table role="tree">
                    <thead role="tree">
                        <tr>
                            <th class="choice">
                                选择
                            </th>
                            <th class="product-head">商品</th>
                            <th class="price">金额</th>
                            <th class="operate">删除</th>
                        </tr>
                    </thead>
                    <tbody role="tree" id="trolley-tbody"></tbody>
                </table>
            </div>
            <div class="pay">
                <div>已选择<span id="choice-num">0</span>件</div>
                <div class="pay-operate">
                    <div>
                        合计：<span id="all-price">0</span>元
                    </div>
                    <button class="btn-pay" id="btn-pay" onclick="goPay()">去结算</button>
                </div>
            </div>  
        </div>
    </main>
    <div class="main-bottom bottom">
        <div class="footer-links clearfix">
            <dl class="col-links col-links-first">
                <dt></dt>
            </dl>
            <dl class="col-links ">
                <dt>选购指南</dt>
                <dd><a rel="nofollow" href="/allphone">手机</a></dd>
                <dd><a rel="nofollow" href="/allcomputer">电脑</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>服务中心</dt>
                <dd><a rel="nofollow" onclick="openChat()" style="cursor: pointer">智能客服</a></dd>
                <dd><a rel="nofollow" href="/order" target="_blank">订单查询</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>关于</dt>
                <dd><a rel="nofollow" href="https://sugarscat.com" target="_blank">了解我们</a></dd>
            </dl>
        </div>
        <div class="site-info">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites">
                    <a rel="nofollow" href="/" target="_blank">维多购物平台</a>
                    <span class="sep">|</span>
                    <a rel="nofollow" href="/privacy" target="_blank"
                    >隐私政策</a
                    >
                </p>
                <p class="sites">
                    <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank"
                    >中国消费者协会</a
                    >
                    <span class="sep">|</span>
                    <a rel="nofollow" href="http://www.bj315.org/" target="_blank"
                    >北京市消费者协会</a
                    >
                </p>
                <p>
                    &copy;2023-至今 版权所有 维多购物平台
                    <br />
                    本网站所列数据、图片，均来自互联网已公开信息，仅供交流学习！
                </p>
            </div>
        </div>
    </div>
</body>
<script src="./js/message.js"></script>
<script src="./js/chat.js"></script>
<script>
    // 检查登录状况
    function checkLogin() {
        const header = document.getElementById("header")
        let id = GetCookie("id")
        let token = GetCookie("token")
        if (token.length>0) {
            $.ajax({
                url:"/api/index",
                method:"post",
                data:{
                    id: id,
                    token: token
                },
                success(res){
                    if(res.code===1001) {
                        header.classList.remove("no-user")
                        header.classList.add("has-user")
                        document.getElementById("username").innerText = res.user
                    } else {
                        AddMessage("warning", "用户令牌过期")
                        header.classList.remove("has-user")
                        header.classList.add("no-user")
                        setTimeout(()=>{
                            location.href = "/account#login"
                        }, 500)
                    }
                }
            })
        }else{
            header.classList.remove("has-user")
            header.classList.add("no-user")
            AddMessage("error", "未登录")
            setTimeout(()=>{
                location.href = "/account#login"
            }, 500)
        }
    }
    checkLogin()

    let uid = GetCookie("id")
    let token = GetCookie("token")
    let list = []
    let tids = []
    if (token.length>0) {
        $.ajax({
            url:"/api/trolley",
            method:"post",
            data:{
                uid: uid,
                token: token
            },
            success(res){
                if(res.code===1001) {
                    list = res.data
                    let html="";
                    for(let i=0; i < list.length; i++){
                        html += `<tr>
                            <td class="choice">
                                <input type="checkbox" class="ui-checkbox" id="`+ list[i].tid + `" onclick="choiceOne()">
                            </td>
                            <td class="product">
                                <img src="./images/`+ list[i].pclass +`/`+ list[i].pname + `.webp" alt="`+ list[i].pname +`">
                                <h5>`+ list[i].pname + " " + list[i].pversion + " " + list[i].pcolor +`</h5>
                            </td>
                            <td class="price"><h5>`+ list[i].pprice +`元</h5></td>
                            <td class="operate"><button title="删除" onclick="deleteProduct(`+ list[i].tid +`)">
                                <svg t="1687944282819" class="icon-delete" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2959" width="28" height="28"><path d="M507.168 473.232L716.48 263.936a16 16 0 0 1 22.624 0l11.312 11.312a16 16 0 0 1 0 22.624L541.12 507.168 750.4 716.48a16 16 0 0 1 0 22.624l-11.312 11.312a16 16 0 0 1-22.624 0L507.168 541.12 297.872 750.4a16 16 0 0 1-22.624 0l-11.312-11.312a16 16 0 0 1 0-22.624l209.296-209.312-209.296-209.296a16 16 0 0 1 0-22.624l11.312-11.312a16 16 0 0 1 22.624 0l209.296 209.296z" fill="#000000" p-id="2960"></path></svg>
                            </button></td></tr>`
                    }
                    $("#trolley-tbody").append(html)
                }
            }
        })
    }

    function deleteProduct(tid) {
        $.ajax({
            url:"/api/trolley",
            method:"delete",
            data:{
                uid: uid,
                token: token,
                tid: tid
            },
            success(res){
                if(res.code===1001) {
                    AddMessage("success", "删除成功")
                    setTimeout(()=>{
                        location.reload()
                    }, 500)

                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
    }
    
    function choiceOne() {
        let priceCount = 0
        let tidOne = []
        for(let i=0; i < list.length; i++){
            if (document.getElementById(list[i].tid).checked) {
                tidOne.push(list[i].tid)
                priceCount += list[i].pprice
            }
        }
        document.getElementById("choice-num").innerHTML = tidOne.length.toString()
        document.getElementById("all-price").innerHTML = priceCount.toString()
        tids = tidOne
        document.getElementById("btn-pay").disabled = tids.length === 0;
    }
    choiceOne()
    
    function goPay() {
        let tid = ""
        for (let i = 0; i < tids.length; i++) {
            tid += tids[i]
            if (i < tids.length - 1)
                tid += "$"
        }
        $.ajax({
            url:"/api/createorder",
            method:"post",
            data:{
                uid: uid,
                token: token,
                tid: tid
            },
            success(res){
                if(res.code===1001) {
                    location.href = "/pay"
                } else if (res.code===1002){
                    AddMessage("warning", "您有未支付订单，不可继续结算")
                    setTimeout(()=>{
                        location.href = "/pay"
                    }, 500)
                } else  {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
    }

</script>
</html>